<?php
include_once '../fn.php';
loginCheck();
$flag = 'posts';

?>

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>Posts &laquo; Admin</title>
    <link rel="stylesheet" href="../assets/vendors/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../assets/vendors/font-awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../assets/vendors/nprogress/nprogress.css">
    <link rel="stylesheet" href="../assets/css/admin.css">
    <link rel="stylesheet" href="../assets/vendors/pagination/pagination.css">
    <!-- 引入模块化插件 -->
    <!-- <script src="../assets/vendors/nprogress/nprogress.js"></script> -->
    <script src="../assets/vendors/require/require.js"></script>
    <script src="../assets/vendors/config.js"></script>

    <style>
        .mask-box {
            position: fixed;
            display: none;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 999999;
        }

        .mask-box .container-fluid {
            position: absolute;
            overflow: hidden;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 960px;
            /* height: 500px; */
            background: #ccc;
            border-radius: 20px;
            box-shadow: 8px 7px 8px 8px rgba(0, 0, 0, 0.3);
        }

        .w-e-text {
            background-color: #fff !important;
        }
    </style>
</head>

<body>
    <script>
        // NProgress.start();
        // nprogress

        require(['nprogress'],function (NProgress) {
            NProgress.start();
        })


    </script>
    <div class="main">
        <nav class="navbar">
            <button class="btn btn-default navbar-btn fa fa-bars"></button>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="profile.html"><i class="fa fa-user"></i>个人中心</a></li>
                <li><a href="login.php"><i class="fa fa-sign-out"></i>退出</a></li>
            </ul>
        </nav>
        <div class="container-fluid">
            <div class="page-title">
                <h1>所有文章</h1>
                <a href="post-add.html" class="btn btn-primary btn-xs">写文章</a>
            </div>
            <!-- 有错误信息时展示 -->
            <!-- <div class="alert alert-danger">
                <strong>错误！</strong>发生XXX错误
            </div> -->
            <div class="page-action">
                <!-- show when multiple checked -->
                <a class="btn btn-danger btn-sm" href="javascript:;" style="display: none">批量删除</a>
                <!-- <ul class="pagination pagination-sm pull-right">
                    <li><a href="#">上一页</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">下一页</a></li>
                </ul> -->
                <div id="pagination" class="pull-right">

                </div>
            </div>
            <table class="table table-striped table-bordered table-hover">
                <thead>
                    <tr>
                        <th class="text-center" width="40"><input type="checkbox"></th>
                        <th>标题</th>
                        <th>作者</th>
                        <th>分类</th>
                        <th class="text-center">发表时间</th>
                        <th class="text-center">状态</th>
                        <th class="text-center" width="100">操作</th>
                    </tr>
                </thead>
                <!-- --------------------------------------------------------------------------------- -->
                <tbody currentPage="1">

                    <script type="text/html" id="tmp">

                    {{ each list v i }}
                    <tr>
                        <td class="text-center"><input type="checkbox"></td>
                        <td>{{ v.title }}</td>
                        <td>{{ v.nickname }}</td>
                        <td>{{ v.name }}</td>
                        <td class="text-center">{{ fixDate(v.created) }}</td>
                        <td class="text-center">{{ translate[v.status] }}</td>
                        <td class="text-center">
                            <a href="javascript:;" class="btn btn-default btn-xs" id="editBtn" data-id="{{ v.id }}">编辑</a>
                            <a href="javascript:;" class="btn btn-danger btn-xs" id="delBtn" data-id="{{ v.id }}">删除</a>
                        </td>
                    </tr>
                    {{ /each }}
                    </script>

                </tbody>
                <!-- --------------------------------------------------------------------------------- -->
            </table>
        </div>
    </div>

    <!-- 修改文章的模态框 -->
    <div class="mask-box">
        <div class="container-fluid">
            <div class="page-title">
                <h1>写文章</h1>
            </div>
            <!-- 有错误信息时展示 -->
            <!-- <div class="alert alert-danger">
        <strong>错误！</strong>发生XXX错误
      </div> -->
            <form class="row" action="./posts/postsAdd.php" method="POST" enctype="multipart/form-data">
                <div class="col-md-9">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input id="title" class="form-control input-lg" name="title" type="text" placeholder="文章标题">
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea id="content" class="form-control input-lg hide" name="content" cols="30" rows="10" placeholder="内容"></textarea>
                        <!-- 富文本编辑器父容器 -->
                        <div id="content-box"></div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="form-group">
                        <label for="slug">别名</label>
                        <input id="slug" class="form-control" name="slug" type="text" placeholder="slug">
                        <p class="help-block">https://zce.me/post/<strong id="strong">slug</strong></p>
                    </div>
                    <div class="form-group">
                        <label for="feature">特色图像</label>
                        <!-- show when image chose -->
                        <img class="help-block thumbnail" style="display: none;width:80px; height:80px;">
                        <input id="feature" class="form-control" name="feature" type="file" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label for="category">所属分类</label>
                        <!----------------------------------- 模版引擎施工中-------------------------------------------- -->
                        <!-- <select id="category" class="form-control" name="category">
                            <option value="1">未分类</option>
                            <option value="2">潮生活</option>
                        </select> -->
                        <select id="category" class="form-control" name="category">

                            <script type="text/html" id="tmp-cate">
                            {{ each list v i }}
                            <option value="{{ v.id }}" slug=" {{ v.slug }} ">{{ v.name }}</option>
                            {{ /each }}
                            </script>

                        </select>
                        <!------------------------------------------------------------------------------------ -->
                    </div>
                    <div class="form-group">
                        <label for="created">发布时间</label>
                        <input id="created" class="form-control" name="created" type="datetime-local">
                    </div>
                    <div class="form-group">
                        <label for="status">状态</label>
                        <select id="status" class="form-control" name="status">
                            <!----------------------------------- 模版引擎施工中-------------------------------------------- -->
                            <!-- <option value="drafted">草稿</option>
                            <option value="published">已发布</option> -->
                            <script type="text/html" id="tmp-state">
                            {{ each $data v k }}
                            <option value="{{ k }}">{{ v }}</option>
                            {{ /each }}
                            </script>
                            <!---------------------------------------------------------------------------------------------- -->

                        </select>
                    </div>
                    <div class="form-group">
                        <input class="btn btn-default btn-xs" id="save-btn" type="button" value="保存">
                        <input class="btn btn-danger btn-xs close-btn" type="button" style="background-color: #DD5145;" value="放弃">
                    </div>
                </div>
            </form>
        </div>

    </div>

    <!-- 引入公共侧边栏 -->
    <?php include './inc/aside.php'; ?>

    <script>
        // NProgress.done();
        require(['nprogress'],function (NProgress) {
            NProgress.done();
        })
    </script>


    <script>
        // 导入模块
        require(['posts'], function(str) {
            console.log(str);

        });
    </script>
</body>

</html>